<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="referrer" content="never">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title id='title'>Chat</title>
    <meta name="renderer" content="webkit">
    <script src="js/vue.js"></script>
    <script src="js/jquery.min.js"></script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
    <link rel="stylesheet" href="http://cdn.amazeui.org/amazeui/2.7.2/css/amazeui.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.css">
    <script src="js/amazeui.min.js"></script>
    <script src="js/cq-ws.js"></script>
    <script src="js/muse-ui.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/muse-ui/dist/muse-ui.css">
    <script>
        Notification.requestPermission().then(function (result) {
            if (result == "denied") openSnack("error", "Permission denied.")
            if (result == "granted") openSnack("Success", "Notification inited.")
        })
        listen = window.location.search.split("?")[1]
    </script>
</head>

<body>
    <div id="app" style="width: 100%;">
        <header class="am-topbar am-topbar-inverse am-topbar-fixed-top">
            <img style="max-width: 50px;max-height: 50px;" :src="'http://p.qlogo.cn/gh/' + active + '/' + active +'/640/'" />
        </header>
        <mu-snackbar top-end :color="snack.color" :open.sync="snack.open" position="top">
            <mu-icon left :value="icon"></mu-icon>
            {{snack.message}}
            <mu-button flat slot="action" color="#fff" @click="snack.open = false">Close</mu-button>
        </mu-snackbar>
        <div id="container" style="margin-bottom:7%">
            <ul class="am-comments-list am-comments-list-flip">
                <div v-for="i in Msgs">
                    <li :class="am-comment">
                        <img class="am-comment-avatar" :alt="i.user_id" :src="'https://q2.qlogo.cn/headimg_dl?dst_uin=' + i.user_id + '&spec=100'" />
                        <div class="am-comment-main">
                            <header class="am-comment-hd">
                                <div class="am-comment-meta">
                                    <a href="#link-to-user" class="am-comment-author" v-if="i.sender.card!=''">{{i.sender.card}}</a>
                                    <a href="#link-to-user" class="am-comment-author" v-if="i.sender.card==''">{{i.sender.nickname}}</a>
                                </div>
                            </header>
                            <div class="am-comment-bd" v-html="i.message"></div>
                        </div>
                    </li>
                </div>
            </ul>
        </div>
        <div id="MsgInput" style="position: fixed;bottom: 0;left: 0;height: 38px;background-color: white;width: 100%;"
            v-if="sendEnable">
            <div class="am-input-group">
                <input type="text" class="am-form-field" id="MsgIpt" v-model="ipt">
                <span class="am-input-group-btn">
                    <button class="am-btn am-btn-default" type="button" @click="send()">发送</button>
                </span>
            </div>
        </div>
    </div>
    <script>
        reg_img = /(.*)\[CQ:image,file=(.*),url=(.*)\](.*)/i
        reg_at = /(.*)\[CQ:at,qq=(.*)\](.*)/i
        function processGroup(data) {
            var context = data
            var tmp
            context.id = context.group_id
            context.raw = context.message
            tmp = reg_img.exec(context.message)
            while (tmp != null) {
                context.message = tmp[1] + "<img rel='noreferrer' style='max-width:300px;max-height:300px;' src=" + tmp[3] + ">" + tmp[4]
                tmp = reg_img.exec(context.message)
            }
            tmp = reg_img.exec(context.raw)
            while (tmp != null) {
                context.raw = tmp[1] + "[图片]" + tmp[4]
                tmp = reg_img.exec(context.raw)
            }
            tmp = reg_at.exec(context.message)
            while (tmp != null) {
                context.message = tmp[1] + " @" + tmp[2] + " " + tmp[3]
                tmp = reg_at.exec(context.message)
            }
            tmp = reg_at.exec(context.raw)
            while (tmp != null) {
                context.raw = tmp[1] + " @" + tmp[2] + " " + tmp[3]
                tmp = reg_at.exec(context.raw)
            }
            return context
        }
        CQ = new window.CQWebSocket({
            protocol: "wss:"
        })
        app = new Vue({
            el: '#app',
            data: {
                Msgs: [], active: listen, ipt: '', sendEnable: false,
                snack: {
                    color: 'success', message: '', open: false, timeout: 4000
                }
            },
            computed: {
                icon() {
                    return {
                        success: 'check_circle',
                        info: 'info',
                        warning: 'priority_high',
                        error: 'warning'
                    }[this.snack.color]
                },
            },
            methods: {
                openColorSnackbar() {
                    if (this.snack.timer) clearTimeout(this.snack.timer);
                    this.snack.open = true;
                    this.snack.timer = setTimeout(() => { this.snack.open = false }, this.snack.timeout);
                },
                send() {
                    if (this.ipt != '') CQ('send_group_msg', { group_id: this.active, message: this.ipt })
                    this.ipt = ''
                }
            }
        })
        onerror = function (msg, url, l) { openSnack("error", msg + "\nAt: " + url + ":" + l + "\n") }
        function openSnack(color, msg) {
            app.snack.message = msg
            app.snack.color = color
            app.openColorSnackbar();
        }
        CQ.on('socket.error', console.error)
            .on('socket.connecting', (wsType, attempts) => console.log('尝试第 %d 次连线', attempts))
            .on('socket.connect', (wsType, sock, attempts) => console.log('第 %d 次连线成功', attempts))
            .on('socket.failed', (wsType, attempts) => console.log('第 %d 次连线失败', attempts))
            .on('api.response', (resObj) => console.log('服务器响应: %O', resObj))
            .on('socket.close', (wsType, code, desc) => console.log('[%s] 连接关闭(%d: %s)', wsType, code, desc))
            .on('ready', () => console.log('初始化完成'))
            .on('message.group', (e, context) => {
                if (data.group_id != app.active) return;
                console.log(context)
                data = processGroup(context)
                if (data != null) {
                    app.Msgs.push(data)
                    WindowsMsg = new Notification((data.sender.card != '') ? data.sender.card : data.sender.nickname, {
                        body: data.raw, icon: "https://q2.qlogo.cn/headimg_dl?dst_uin=" + data.user_id + "&spec=100",
                    });
                }
            })
        CQ.connect()
    </script>
    <script id="Encode">
        function EncodeUtf8(a) { var e, b = escape(a), c = b.split("%"), d = ""; for ("" != c[0] && (d = c[0]), e = 1; e < c.length; e++) { d += "u" == c[e].substring(0, 1) ? fb(fa(c[e].substring(1, 5))) : "%" + c[e] } return d } function fa(s) { var n, i, c = "", ss = "0123456789ABCDEF", digS = ""; for (i = 0; i < s.length; i++) { c = s.charAt(i), n = ss.indexOf(c), digS += fc(eval(n)) } return digS } function fc(a) { var d, b = "", c = 0; for (d = 0; 4 > d; d++) { c = Math.pow(2, 3 - d), a >= c ? (b += "1", a -= c) : b += "0" } return b } function fd(s) { var i, retV = 0; if (4 == s.length) { for (i = 0; 4 > i; i++) { retV += eval(s.charAt(i)) * Math.pow(2, 3 - i) } return retV } return -1 } function fb(s) { var sss, i, retS = "", tempS = "", ss = ""; if (16 == s.length) { for (tempS = "1110" + s.substring(0, 4), tempS += "10" + s.substring(4, 10), tempS += "10" + s.substring(10, 16), sss = "0123456789ABCDEF", i = 0; 3 > i; i++) { retS += "%" } ss = tempS.substring(8 * i, 8 * (eval(i) + 1)); retS += sss.charAt(fd(ss.substring(0, 4))); retS += sss.charAt(fd(ss.substring(4, 8))); return retS } return "" } function HTMLEncode(html) { var temp = document.createElement("div")(temp.textContent != null) ? (temp.textContent = html) : (temp.innerText = html); var output = temp.innerHTML; temp = null; return output };
    </script>
</body>

</html>